<template lang='pug'>
.clocker
  span.xs {{title}}
  span.h1.t {{H1}}
  span.h2.t {{H2}}
  span.bd :
  span.m1.t {{M1}}
  span.m2.t {{M2}}
  span.bd :
  span.m1.t {{S1}}
  span.m2.t {{S2}}
</template>
<script>
export default {
  data() {
    return {
      // 时，分，秒
      H1:0,
      H2:0,
      M1:0,
      M2:0,
      S1:0,
      S2:0,
      show: true,
      t: 0,
      h: 0,
      m: 0,
      s: 0,
      time: {},
    }
  },
  props:['limitTime','title','difTime'],
  created() {
    this.updateTime()
  },
  methods: {
    // 初始化时间
    getTimes() {
      // limitTime 如 '2017/06/02 00:00:00'
      let end_time = new Date(Date.parse(this.limitTime))
      let now = new Date()
      let t = end_time.getTime() - now.getTime()+this.difTime
      if (t <=0) {
        this.H1 = 0
        this.H2 = 0
        this.M1 = 0
        this.M1 = 0
        this.S1 = 0
        this.S1 = 0
        clearInterval(this.time)
        this.$emit('timeEnd')
      }

      this.h = Math.floor(t / 1000 / 60 / 60)
      this.m = Math.floor(t / 1000 / 60 % 60)
      this.s = Math.floor(t / 1000 % 60)
      if (this.h >99) {
        this.h = 99
      }
      this.H1 = this.getNum(this.h)[0]
      this.H2 = this.getNum(this.h)[1]
      this.M1 = this.getNum(this.m)[0]
      this.M2 = this.getNum(this.m)[1]
      this.S1 = this.getNum(this.s)[0]
      this.S2 = this.getNum(this.s)[1]
    },
    updateTime() {
      let self = this
      this.time = setInterval(function() {
        self.getTimes()
      },1000)
    },
    getNum (t) {
      if (t > 9) {
        return [Math.floor(t/10),t%10]
      }else {
        return [0,t]
      }
    } 
  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.clocker {
  width: to_rem(750px); // font-size:to_rem(34px);
  color: #444444;
  font-weight: bold;
  font-size: 0;
  span {
    display: inline-block;
    margin-right: to_rem(4px);
    font-size: to_rem(34px);
  }
  .xs {
    margin-right: to_rem(8px);
  }
  .t {
    display: inline-block;
    background: #ff782d;
    border-radius: to_rem(2px);
    color: #fff;
    line-height: to_rem(34px);
    padding: 0 to_rem(4px);
  }
  .bd {
    color: #ff782d;
  }
}
</style>